<template>
	<div class="nav">
		<div :class="['item']" v-for="item,index in nav"  :key="item.id"
		>
			<router-link :to="item.path" @click="changenav(index)">
				<span>
					{{item.name}}
				</span>
			</router-link>
		</div>
	</div>
</template>

<script>
	import {mapState,mapMutations} from "vuex";
	export default {
		name: "compNav",
		data() {
			return {
				nav: [{
						id: 1,
						name: "推荐歌单",
						path:"/recommend"
					},
					{
						id: 2,
						name: "排行榜",
						path:"/rank"
					},
					{
						id: 3,
						name: "歌手",
						path:"/singer"
					}
				],
			};
		},
		computed:{
			...mapState(["navIndex"])
		},
		methods:{
			...mapMutations(["clickNav"]),
			changenav(i){
				this.clickNav(i)
			}
		},
	}
</script>

<style lang="scss" scoped>
	.nav {
		width: 100%;
		display: flex;
		justify-content: center;
		height: 50px;
		line-height: 50px;	
		.item {
			flex-basis: 33.3%;
			text-align: center;
			span {
				padding-bottom: 5px;
				font-size: 16px;
				// font-weight: bold;
				color: #fff;
			}
			.active {
				border-bottom: 3px solid #fff;
			}
		}
	}
</style>
